<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="visible"
      width="60%"
      :before-close="cancel"
      @open="open"
    >
      <div class="dialog-content">
        <el-descriptions class="margin-top" :column="2" border>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location-outline" />
              样例图
            </template>
            <el-upload
              class="image-uploader"
              :action="uploadURL"
              :show-file-list="false"
              :http-request="uploadImage"
              :before-upload="beforeimageUrlUpload"
            >
              <img v-if="imgUrlShow" :src="imgUrlShow" class="image" />
              <i v-else class="el-icon-plus image-uploader-icon"></i>
            </el-upload>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building" />
              图片编号
            </template>
            <el-input v-model="form.id" disabled />
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building" />
              创建时间
            </template>
            <el-input :value="form.createTime" disabled />
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone" />
              修改时间
            </template>
            <el-input :value="form.updateTime" disabled />
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="ok">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { upload } from "@/api/home";
import { deleteImage } from "@/api/common";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    imageInfo: {
      type: Object,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: {},
    },
    title: {
      type: String,
      default: "",
    },
    index: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      form: {
        id: "",
        imageUrl: "",
        createTime: "",
        updateTime: "",
      },
      imgUrl: "", // 暂存图片路径
      // 显示图片
    };
  },
  computed: {
    // 不知道什么原因的bug 绑定表单中的imageUrl 无法正常回显图片
    imgUrlShow() {
      if (this.imgUrl) {
        return this.imgUrl;
      } else {
        return this.form.imageUrl;
      }
    },
    uploadURL() {
      return "";
    },
  },

  methods: {
    uploadImage(f) {
      console.log(f);
      console.log("@imgUrl",this.imgUrl);
      const formdata = new FormData();
      formdata.append("image", f.file);
      formdata.append("imgUrl", this.imgUrl);
      upload(formdata).then((res) => {
        this.form.imageUrl = res.data;
        this.imgUrl = res.data;
        console.log(res);
        if (res.code !== 200) {
          this.$message.error("上传失败，请重试");
        } else {
          this.$message.success("上传成功");
          console.log("@@@@@@@@", this.form.imageUrl);
        }
      });
    },
    open() {
      // console.log(this.data)
      // index 为1的时候是编辑弹窗
      if (this.index === 1) {
        this.form = this.imageInfo;
      }
    },
    initForm() {
      this.form = {
        id: "",
        imageUrl: "",
        createTime: "",
        updateTime: "",
      };
      this.imgUrl = "";
    },
    cancel() {
      if (this.imgUrl) {
        console.log("如果点击取消，缓存区仍有图片，需要清除");
        deleteImage({ imgUrl: this.imgUrl }).then((res) => {
          console.log(res.code);
        });
      }
      this.$emit("cancel");
      this.initForm();
    },
    ok() {
      // 清空图片缓存区
      this.imgUrl = "";
      const info = {
        imageCarousel: {
          id: this.form.id,
          imageUrl: this.form.imageUrl,
        },
        accountId: this.$store.getters.accountId,
      };
      this.$emit("ok", info);
      this.initForm();
    },
    beforeimageUrlUpload(file) {
      const _name = file.name;
      const _index = _name.lastIndexOf(".");
      const _imgType = _name.substring(_index);

      const isImageLegal =
        _imgType == ".jpg" ||
        _imgType == ".jpeg" ||
        _imgType == ".png" ||
        _imgType == ".PNG" ||
        _imgType == ".gif" ||
        _imgType == ".GIF";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isImageLegal) {
        this.$message.error(`图片格式仅支持.png、.jpg、.jpeg、.gif!`);
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isImageLegal && isLt2M;
    },
  },
};
</script>

<style scoped>
.image-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.image-uploader .el-upload:hover {
  border-color: #409eff;
}
.image-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 66px;
  height: 66px;
  line-height: 66px;
  text-align: center;
}
.image {
  width: 66px;
  height: 66px;
  display: block;
}
</style>
